import { useRoutes } from 'react-router-dom'
import Layout from '../layout/index.jsx'
import Use from '../views/hook/use/use.jsx'
import UseState from '../views/hook/useState/index.jsx'
import UseEffect from '../views/hook/useEffect/index.jsx'
import UseContext from '../views/hook/useContext/index.jsx'
import UseRef from '../views/hook/useRef/index.jsx'
import UseReducer from '../views/hook/useReducer/index.jsx'
import UseMemo from '../views/hook/useMemo/index.jsx'
import { Navigate } from 'react-router-dom'

export const routes = [
  {
    path: '/',
    element: <Navigate to={'/layout'} />
  },
  {
    path: "/layout",
    element: <Layout />,
    children: [
      {
        path: '/layout/hook',
        meta: {
          title: 'hook使用'
        },
        children: [
          {
            path: '/layout/hook/use',
            element: <Use />,
            meta: {
              title: 'use使用'
            }
          },
          {
            path: '/layout/hook/useState',
            element: <UseState />,
            meta: {
              title: 'useState使用'
            }
          },
          {
            path: '/layout/hook/useEffect',
            element: <UseEffect />,
            meta: {
              title: 'useEffect使用'
            }
          },
          {
            path: '/layout/hook/useContext',
            element: <UseContext />,
            meta: {
              title: 'useContext使用'
            }
          },
          {
            path: '/layout/hook/useRef',
            element: <UseRef />,
            meta: {
              title: 'useRef使用'
            }
          },
          {
            path: '/layout/hook/useReducer',
            element: <UseReducer />,
            meta: {
              title: 'useReducer使用'
            }
          },
          {
            path: '/layout/hook/useMemo',
            element: <UseMemo />,
            meta: {
              title: 'useMemo使用'
            }
          }
        ]
      }
    ]
  },
]


export const Router = () => {
  const element = useRoutes(routes)
  return element
}